<template>
  <div class="container01" v-if="isShow">
    <div class="signle">
      <div class="title">2021-1-1到2021-2-9</div>
      <img src="../../assets/figures/1-1.png" class="img">
    </div>
    <div class="signle">
      <div class="title">2022-2-1到2022-2-28</div>
      <img src="../../assets/figures/1-2.png" class="img">
    </div>
    <div class="signle">
      <div class="title"> 2023-1-20到2023-2-20</div>
      <img src="../../assets/figures/1-3.png" class="img">
    </div>
  </div>
 
  <div class="summary" v-if="isShow">  <p style="color:black" >总结：</p>2021年、2022年、2023年年初电力负荷均出现了明显的先下降后上升过程，但原因不明，需要和电力公司沟通，了解原因。因此在模型训练和测试时选择将这段时间的数据忽略。</div>
  <div class="container02" v-if="isShow">
    <div class="signle">
      <div class="title"></div>
      <img src="../../assets/figures/1-4.png" class="img">
      <div class="summary"></div>
    </div>
    <div class="signle">
      <div class="title"></div>
      <img src="../../assets/figures/1-5.png" class="img">
      <div class="summary"></div>
    </div>
    <div class="signle">
      <div class="title"></div>
      <img src="../../assets/figures/1-6.png" class="img">
      <div class="summary"></div>
    </div>
    <div class="signle">
      <div class="title"></div>
      <img src="../../assets/figures/1-7.png" class="img">
      <div class="summary"></div>
    </div>
  </div>
 
  <div class="summary" v-if="isShow"> <p style="color:black">总结：</p>根据上图的特征重要性，神经网络模型训练时，删去light、wind_speed、wind_direction_angle、weather_status、precipitation这5个特征。  年份的重要性在0.052左右，是一个不可忽视的因素。由于数据集只有2021年、2022年和2023年前2个月的数据，若模型用2021和2022年的数据训练，预测2023年2个月
的负荷，则模型对年份特征的掌握情况还不够好，我期望的是有过去3年以上的数据来预测下一年的负荷。因此，模型使用2021年、2022年前11个月、2023年的数据训练，
预测2022年12月的负荷。</div>
</template>

<script setup  >
// import { th } from 'element-plus/lib/locale/index.js';import
import { ElMessage } from 'element-plus'
import { ref } from 'vue';
let isShow = ref(false);
setTimeout(() => {
  isShow.value = true;
  ElMessage.success('数据加载完成！')
}, 5000);
if(!isShow.value) {
  ElMessage.warning('正在加载数据，请稍后...')
}
</script>

<style lang="scss" scoped>
.container01{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  .title{
    font-size: 14px;
    font-weight: bold;
    padding: 12px 16px;
  }
 .signle{
  border:1px transparent #ccc;
  border-radius:5px;
  background-color: rgb(255, 255, 255);
  transition: transform 0.3s;
}
.signle:hover {
  transform: scale(1.05);
}
 .img{
  width:100%;
 
}

}
.container02{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  .title{
    font-size: 14px;
    font-weight: bold;
    padding: 12px 16px;
  }
 .signle{
  border:1px transparent #ccc;
  border-radius:5px;
  background-color: rgb(255, 255, 255);
  transition: transform 0.3s;
}
.signle:hover {
  transform: scale(1.05);
}
.img{
  width:100%;
 
}

}
.summary{
    font-size: 12px;
    padding: 12px 16px;
    color: #666;
    border:1px transparent #ccc;
    border-radius:5px;
    background-color: rgb(255, 255, 255);
    margin-top:10px;
    margin-bottom:20px;
}

</style>
